<template>
    <!-- <div><span @click="DishesInfoVisible = true">特殊测试</span> -->
    <el-dialog :visible.sync="DishesInfoVisible" custom-class="DishesInfo_dialogStyle">

        <!-- 菜图 -->
        <!-- <h2>{{getDishesInfo[0].dishes_img}}</h2> -->
        <el-image slot="title" class="DishesInfo_imgStyle" :src="getDishesInfo[0].dishesImg" fit="cover">
        </el-image>

        <!-- 菜名 时间 分类 收藏数 点赞数 -->
        <el-card style="margin-top:-60px">
            <el-row>
                <el-col :span="2"><img src="../../../assets/fans.png" style="width:25px;" /></el-col>
                <el-col :span="14">
                    <h2 style="margin:0 0">{{getDishesInfo[0].dishesName}}
                        <el-tag class="tagStyle" :type="tagClassify(getDishesInfo[0].dishesTag)" effect="dark"
                            size="mini">
                            {{getDishesInfo[0].dishesTag}}
                        </el-tag>
                    </h2>
                </el-col>
                <el-col :span="4">
                    <el-row style="">
                        <el-col :span="10">
                            <el-tooltip effect="dark" content="未收藏" placement="bottom">
                                <img v-if="vuexIsCollect" class="DishesInfo_iconStyle"
                                    src="../../../assets/share/not-collect.png" width="35px" @click="addCollect">
                            </el-tooltip>
                            <el-tooltip effect="dark" content="已收藏" placement="bottom">
                                <img v-if="!vuexIsCollect" class="DishesInfo_iconStyle"
                                    src="../../../assets/share/collect.png" width="35px" @click="cancelCollect">
                            </el-tooltip>
                        </el-col>
                        <el-col :span="14">
                            <p class="DishesInfo_pStyle">{{getDishesInfo[0].dishesCollect}}</p>
                        </el-col>
                    </el-row>

                </el-col>
                <el-col :span="4">
                    <el-row style="margin-top:1px;">
                        <el-col :span="10">
                            <el-tooltip effect="dark" content="未点赞" placement="bottom">
                                <img v-if="vuexIsGood" class="DishesInfo_iconStyle"
                                    src="../../../assets/share/not-good.png" width="30px" @click="addGood">
                            </el-tooltip>
                            <el-tooltip effect="dark" content="已点赞" placement="bottom">
                                <img v-if="!vuexIsGood" class="DishesInfo_iconStyle"
                                    src="../../../assets/share/good.png" width="30px" @click="cancelGood">
                            </el-tooltip>
                        </el-col>
                        <el-col :span="14">
                            <p class="DishesInfo_pStyle">{{getDishesInfo[0].dishesGoodnum}}</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>

        <div style="margin-left:2%;width:98%">
            <!-- 发布者 -->
            <el-row style="margin-top:15px;">
                <el-col :span="2">
                    <el-avatar :size="50" :src="dishesUserInfo.infoImg" fit="cover" style="border:3px solid #BBDDFF">
                    </el-avatar>
                </el-col>
                <el-col :span="18">
                    <h3 style="margin-left:20px;">{{dishesUserInfo.infoNickname}}</h3>
                </el-col>
                <el-col :span="4">
                    <el-button v-if="vuexIsAttention" type="primary" style="float:right;width:100px;margin-top:10px;"
                        @click="addAttention">关注</el-button>
                    <el-button v-if="!vuexIsAttention" type="" style="float:right;width:100px;margin-top:10px;"
                        @click="cancelAttention">已关注</el-button>
                </el-col>
            </el-row>


            <!-- 菜的相关描述 -->
            <h3>本菜介绍</h3>
            <p>{{getDishesInfo[0].dishesDescribe}}</p>

            <!-- 菜的配料 -->
            <h3>本菜配料</h3>
            <div style="width:100%;" class="clearfix">
                <div v-for="di in getDishesInfo[0].dishesIngredients" :key="di.id">
                    <div style="width:100px;float:left">
                        <p style="font-weight:600;">{{di.ingredientsName}}</p>
                        <p style="width:100px;font-size:16px;">{{di.ingredientsNum}}<span
                                style="margin-left:5px;font-size:12px;">{{di.ingredientsUnit}}</span></p>
                    </div>
                </div>
            </div>

            <!-- 菜的步骤 -->
            <h3>本菜步骤</h3>
            <div v-for="(ds,index) in getDishesInfo[0].dishesStep" :key="ds.id">
                <el-row>
                    <el-col :span="4">
                        <el-row style="margin-bottom:60px;">
                            <el-col :span="4">
                                <div style="width:6px;height:40px;background-color:#4074bf;"></div>
                            </el-col>
                            <el-col :span="20">
                                <div style="font-weight:700;font-size:30px;margin-top:4px;">{{index+1}}</div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="15">
                        <div>{{ds.stepContent}}</div>
                    </el-col>
                    <el-col :span="5">
                        <el-image class="DishesInfo_imgStepStyle" :src="ds.stepImg" fit="cover" v-if="ds.stepImg!=''">
                        </el-image>
                    </el-col>
                </el-row>
            </div>

            <!-- 发布时间  -->
            <div>
                <span>发布时间:&nbsp;{{getDishesInfo[0].dishesTime}}</span>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import {
        mapState,
        mapGetters
    } from 'vuex'

    import {
        setAttention,
        deleteAttention
    } from '@/api/accountApi.js';
    import {
        setCollect,
        deleteCollect,
        getListCollect
    } from '@/api/accountApi.js';
    import {
        setGood,
        deleteGood
    } from '@/api/accountApi.js';

    import {
        postDishes
    } from '@/api/dishesApi.js';

    export default {
        name: 'DishesInfo',
        computed: {
            ...mapState(['dishesUserInfo', 'userInfo', 'vuexIsCollect', 'vuexIsGood', 'vuexIsAttention']),
            ...mapGetters(['getDishesInfo'])
        },
        data() {
            return {
                DishesInfoVisible: false,
            }
        },
        methods: {
            //Tag判断
            tagClassify(dishesTag) {
                if (dishesTag === '原创') return this.tagtype = 'success'
                if (dishesTag === '范本') return this.tagtype = 'warning'
                if (dishesTag === '翻制') return this.tagtype = 'danger'
            },
            //添加收藏
            addCollect() {
                setCollect(this.getDishesInfo[0].dishesId, this.userInfo.accountId)
                this.getDishesInfo[0].dishesCollect = parseInt(this.getDishesInfo[0].dishesCollect, 10) + 1;
                postDishes(this.getDishesInfo[0].dishesId,
                    this.getDishesInfo[0].dishesImg,
                    this.getDishesInfo[0].dishesName,
                    this.getDishesInfo[0].dishesDescribe,
                    this.getDishesInfo[0].dishesCollect,
                    this.getDishesInfo[0].dishesGoodnum,
                    this.getDishesInfo[0].dishesTag,
                    this.getDishesInfo[0].dishesUser,
                    this.getDishesInfo[0].dishesTime)
                this.$store.commit('setIsCollect', false)
                this.$store.commit('setUserCollect', []);
                getListCollect(this.$store.state.user.userId).then(resp => {
                    this.$store.commit('setUserCollect', resp.data);
                })
            },
            //取消收藏
            cancelCollect() {
                deleteCollect(this.getDishesInfo[0].dishesId, this.userInfo.accountId).then(resp => {
                    this.$store.commit('setUserCollect', resp.data);
                })
                this.getDishesInfo[0].dishesCollect = parseInt(this.getDishesInfo[0].dishesCollect, 10) - 1;
                postDishes(this.getDishesInfo[0].dishesId,
                    this.getDishesInfo[0].dishesImg,
                    this.getDishesInfo[0].dishesName,
                    this.getDishesInfo[0].dishesDescribe,
                    this.getDishesInfo[0].dishesCollect,
                    this.getDishesInfo[0].dishesGoodnum,
                    this.getDishesInfo[0].dishesTag,
                    this.getDishesInfo[0].dishesUser,
                    this.getDishesInfo[0].dishesTime)
                this.$store.commit('setIsCollect', true)
            },
            //点赞
            addGood() {
                setGood(this.getDishesInfo[0].dishesId, this.userInfo.accountId)
                this.getDishesInfo[0].dishesGoodnum = parseInt(this.getDishesInfo[0].dishesGoodnum, 10) + 1;
                postDishes(this.getDishesInfo[0].dishesId,
                    this.getDishesInfo[0].dishesImg,
                    this.getDishesInfo[0].dishesName,
                    this.getDishesInfo[0].dishesDescribe,
                    this.getDishesInfo[0].dishesCollect,
                    this.getDishesInfo[0].dishesGoodnum,
                    this.getDishesInfo[0].dishesTag,
                    this.getDishesInfo[0].dishesUser,
                    this.getDishesInfo[0].dishesTime)
                this.$store.commit('setIsGood', false)
            },
            //取消点赞
            cancelGood() {
                deleteGood(this.getDishesInfo[0].dishesId, this.userInfo.accountId)
                this.getDishesInfo[0].dishesGoodnum = parseInt(this.getDishesInfo[0].dishesGoodnum, 10) - 1;
                postDishes(this.getDishesInfo[0].dishesId,
                    this.getDishesInfo[0].dishesImg,
                    this.getDishesInfo[0].dishesName,
                    this.getDishesInfo[0].dishesDescribe,
                    this.getDishesInfo[0].dishesCollect,
                    this.getDishesInfo[0].dishesGoodnum,
                    this.getDishesInfo[0].dishesTag,
                    this.getDishesInfo[0].dishesUser,
                    this.getDishesInfo[0].dishesTime)
                this.$store.commit('setIsGood', true)
            },
            //关注
            addAttention() {
                setAttention(this.userInfo.infoId, this.dishesUserInfo.infoId)
                this.$store.commit('setIsAttention', false)
            },
            //取消关注
            cancelAttention() {
                deleteAttention(this.userInfo.infoId, this.dishesUserInfo.infoId)
                this.$store.commit('setIsAttention', true)
            }
        },
        mounted() {


        }
    }
</script>

<style>
    .DishesInfo_dialogStyle {
        text-align: left;
        min-width: 720px;
        z-index: -2
    }

    .DishesInfo_dialogStyle .el-dialog__header {
        padding: 0 0;
        z-index: -2
    }

    .DishesInfo_imgStyle {
        width: 100%;
        height: 260px;
        z-index: -1;
    }

    .DishesInfo_imgStepStyle {
        width: 100px;
        height: 100px;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .DishesInfo_pStyle {
        vertical-align: middle;
        font-size: 16px;
        font-weight: 700;
        color: rgb(77, 77, 77);
        margin-top: 10px;
    }

    .DishesInfo_iconStyle {
        vertical-align: middle;
    }
</style>